<template>
	<div>
		<div class="container">
			<div class="handle-box">
				<el-input v-model="query.keyword" placeholder="用户名" class="handle-input mr10"></el-input>
				<el-button type="primary" :icon="Search" @click="handleSearch">搜索</el-button>

			</div>
			<!-- 表格 -->
			<el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
				<el-table-column prop="user_id" label="ID" width="55" align="center"></el-table-column>
				<el-table-column label="用户名">
					<template #default="scope">{{ scope.row.user_name }}</template>
				</el-table-column>
				<el-table-column prop="user_phone" label="账号"></el-table-column>
				<el-table-column prop="user_email" label="邮箱"></el-table-column>
				<el-table-column prop="user_register_time" label="注册时间"></el-table-column>
				<el-table-column label="操作" width="220" align="center">
					<template #default="scope">
						<div style="display: flex;">
							<el-button text :icon="Edit" @click="handleEdit(scope.$index, scope.row)" v-permiss="12">
								编辑
							</el-button>
							<el-button text :icon="Delete" class="red" @click="handleDelete(scope.$index)"
								v-permiss="12">
								删除
							</el-button>
						</div>
					</template>
				</el-table-column>
			</el-table>

			<!-- 分页处理 -->
			<div class="pagination">
				<el-pagination background layout="total, prev, pager, next" :current-page="query.pageIndex"
					:page-size="query.pageSize" :total="pageTotal" @current-change="handlePageChange"></el-pagination>
			</div>

		</div>

		<!-- 编辑弹出框 -->
		<el-dialog title="编辑" v-model="editVisible" width="30%">
			<el-form label-width="70px">
				<el-form-item label="用户名">
					<el-input v-model="form.user_name"></el-input>
				</el-form-item>
				<el-form-item label="密码">
					<el-input v-model="form.user_pwd"></el-input>
				</el-form-item>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="editVisible = false">取 消</el-button>
					<el-button type="primary" @click="saveEdit">确 定</el-button>
				</span>
			</template>
		</el-dialog>

	</div>
</template>

<script setup lang="ts" name="basetable">
import { ref, reactive } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { Delete, Edit, Search } from '@element-plus/icons-vue';
import { listUserFn, searchUserFn, removeUserFn, modifyUserFn } from '../api/index';

// 定义对象的结构
interface UserItem {
	user_name: string;
	user_phone: string;
	user_register_time: string;
	user_id: string;
	user_email: string;
	user_pwd: string;
}

// 记录表单信息
const query = reactive({
	keyword: '',
	pageIndex: 1,
	pageSize: 5
});

const tableData = ref<UserItem[]>([]);
const pageTotal = ref(0);

// 获取表格数据
const getData = (page: number, pageSize: number) => {
	let token = localStorage.getItem('auto_token')
	listUserFn({ page, pageSize, token }).then(res => {
		// console.log('1.0', res)
		let { code, result } = res;
		if (code == 200) {
			tableData.value = result;
			pageTotal.value = res.data[0].total;
		}
	});
};
getData(query.pageIndex, query.pageSize);

// 搜索用户
const search = () => {
	let token = localStorage.getItem('auto_token')
	searchUserFn({ keyword: query.keyword, token }).then(res => {
		let { code, result } = res;
		if (code == 200) {
			tableData.value = result;
			pageTotal.value = result.length;
		}
	});
};
// 查询操作
const handleSearch = () => {
	query.pageIndex = 1;
	search();
};
// 分页导航
const handlePageChange = (val: number) => {
	query.pageIndex = val;
	getData(query.pageIndex, query.pageSize);
};

// 删除操作
const handleDelete = (index: number) => {
	// 二次确认删除
	ElMessageBox.confirm('确定要删除该用户吗？', '提示', {
		type: 'warning'
	})
		.then(() => {
			let user_id = tableData.value[index].user_id;
			let token = localStorage.getItem('auto_token');
			removeUserFn({ token, user_id }).then(
				content => {
					console.log(content);
					let { code, msg } = content;
					if (code == 200) {
						tableData.value.splice(index, 1);
						ElMessage.success(msg);
					}
					else {
						ElMessage.error(msg);
					}
				}
			)

		})
		.catch(() => { });
};

// 表格编辑时弹窗和保存
const editVisible = ref(false);
let form = reactive({
	user_name: '',
	user_pwd: '',
	user_id: '',
});
let idx: number = -1;
const handleEdit = (index: number, row: any) => {
	// console.log(row)
	idx = index;
	form.user_name = row.user_name;
	form.user_id = row.user_id;
	editVisible.value = true;
};
const saveEdit = async () => {
	editVisible.value = false;
	let token = localStorage.getItem('auto_token');
	if (form.user_name !="" && form.user_pwd!="") {
		await modifyUserFn({ token, ...form })
			.then(
				res => {
					// console.log(res)
					let { code, msg } = res;
					if (code == 200) {
						// 给用户反馈
						ElMessage.success(msg);
						tableData.value[idx].user_name = form.user_name;
						tableData.value[idx].user_id = form.user_id;
					}
					else {
						ElMessage.error(msg);
					}

				}
			)
	}
	else {
		ElMessage.error("输入框不能为空！");
	}

};

</script>

<style scoped>
.handle-box {
	margin-bottom: 20px;
}

.handle-select {
	width: 120px;
}

.handle-input {
	width: 300px;
}

.table {
	width: 100%;
	font-size: 14px;
}

.red {
	color: #F56C6C;
}

.mr10 {
	margin-right: 10px;
}

.table-td-thumb {
	display: block;
	margin: auto;
	width: 40px;
	height: 40px;
}
</style>
